<script lang="ts" setup>
export interface StatsCard {
  label: string
  value: number | string
  description?: string
  icon: string
  iconColor: "blue" | "green" | "yellow" | "orange" | "purple"
  showPercentage?: boolean
}

interface Props {
  cards: StatsCard[]
  loading?: boolean
}

withDefaults(defineProps<Props>(), {
  loading: false
})
</script>

<template>
  <div class="stats-cards" v-loading="loading">
    <div
      v-for="(card, index) in cards"
      :key="index"
      class="stats-card"
      :class="{ 'no-description': !card.description }"
    >
      <div class="stats-content">
        <div class="stats-info">
          <div class="stats-label">{{ card.label }}</div>
          <div class="stats-value">
            {{ card.value }}<span v-if="card.showPercentage">%</span>
          </div>
          <div v-if="card.description" class="stats-description">
            {{ card.description }}
          </div>
        </div>
        <div class="stats-icon" :class="card.iconColor">
          <el-icon>
            <component :is="card.icon" />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;

  .stats-card {
    background: var(--el-bg-color);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s;
    min-height: 80px;

    &:hover {
      box-shadow: var(--el-box-shadow-lighter);
      border-color: var(--el-border-color);
    }

    // 没有描述时增加垂直padding和居中对齐
    &.no-description {
      padding: 20px 16px;

      .stats-content {
        align-items: center;
        min-height: 48px;
      }

      .stats-info {
        justify-content: center;
        gap: 6px;
      }
    }

    .stats-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      min-height: 48px;

      .stats-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .stats-label {
          font-size: 12px;
          color: var(--el-text-color-secondary);
          margin-bottom: 4px;
          font-weight: 500;
          line-height: 1.2;
        }

        .stats-value {
          font-size: 24px;
          font-weight: 600;
          color: var(--el-text-color-primary);
          line-height: 1;
        }

        .stats-description {
          font-size: 11px;
          color: var(--el-text-color-placeholder);
          margin-top: 4px;
          line-height: 1.2;
        }
      }

      .stats-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;

        &.blue {
          background-color: var(--el-color-primary-light-9);
          color: var(--el-color-primary);
        }

        &.green {
          background-color: var(--el-color-success-light-9);
          color: var(--el-color-success);
        }

        &.yellow {
          background-color: var(--el-color-warning-light-9);
          color: var(--el-color-warning);
        }

        &.orange {
          background-color: var(--el-color-warning-light-8);
          color: var(--el-color-warning);
        }

        &.purple {
          background-color: var(--el-color-info-light-9);
          color: var(--el-color-info);
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
}
</style>
